<template>
  <div class="noticemansge">
    <div class="noticemansge_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="文章管理" name="1">
                <div>
                  <div style="width:100%">
                    <el-button
                      @click="openDialog(1)"
                      style="width: 100%;margin-bottom:8px;height:35px;line-height: 10px;"
                      ><div>新增公告</div></el-button
                    >
                  </div>
                  <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <!-- fixed -->
                    <el-table-column prop="date" label="ID">
                      <template slot-scope="scope">
                        <div>{{ scope.row.id }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="公告标题">
                      <template slot-scope="scope">
                        <div style="text-align:center">
                          {{ scope.row.title }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="content" label="公告内容">
                      <template slot-scope="scope">
                        <div
                          style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                        >
                          {{ scope.row.content }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon" label="创建时间/修改时间">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.create_at }}
                        </div>
                        /
                        <div>
                          {{ scope.row.update_at }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="active" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="openDialog(scope.row)"
                            type="text"
                            size="small"
                            >修改
                          </el-button>
                          <!-- <el-popconfirm
                            style="margin-left:10px"
                            title="确定删除吗?"
                            @onConfirm="del(scope.row)"
                          >
                            <el-button slot="reference" type="text" size="small"
                              >删除
                            </el-button>
                          </el-popconfirm> -->
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 新增/修改 -->
          <el-dialog
            :title="isadd ? '新增文章' : '修改文章'"
            width="600px"
            :visible.sync="dialogFormVisible"
            center
          >
            <div>
              <el-form
                :model="form"
                status-icon
                :before-close="handleClose"
                ref="ruleForm"
              >
                <el-form-item
                  label="文章标题"
                  prop="title"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.title"
                    autocomplete="off"
                    placeholder="请输入文章标题"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="文章内容"
                  prop="content"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="form.content"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import Tinymce from "@/components/Tinymce";
// import EditorBar from "@/components/Editor/WangEditor";

import { getNoticeList, addNotice, editNotice } from "@/api/notice/notice";
export default {
  name: "noticemansge",
  data() {
    return {
      isadd: true,
      dialogFormVisible: false,
      form: {
        id: "", //id
        title: "", // 文章标题
        content: "" //文章内容
      },
      formLabelWidth: "120px",
      loading: false,
      activeName: "1",
      tableData: [
        {
          id: "", // id
          title: "", // 文章标题
          content: "", //文章内容
          create_at: "", //创建时间
          update_at: "" //修改时间
        }
      ]
    };
  },

  computed: {},
  created() {
    this.getNoticeList();
  },
  mounted() {},
  methods: {
    getNoticeList() {
      getNoticeList()
        .then(res => {
          console.log("公告列表", res);
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // // 删除文章
    // del(row) {
    //   console.log(row);
    //   delArticle({
    //     article_id: row.id
    //   })
    //     .then(res => {
    //       this.form = {};
    //       this.dialogFormVisible = false;
    //       this.$message.success(res.msg);
    //       console.log(res);
    //       this.getNoticeList();
    //     })
    //     .catch(err => {
    //       this.$message.error(err.msg);
    //       this.dialogFormVisible = false;
    //       console.log(err);
    //     });
    // },

    handleClose() {
      this.resetForm("ruleForm");
      this.form = this.$options.data().form;
      // console.log(this.form);
      this.dialogFormVisible = false;
    },
    submitForm(formName) {
      console.log("表单内容", this.form);
      this.$refs[formName].validate(valid => {
        console.log("valid", valid);
        if (valid) {
          // 新增
          if (this.isadd === true) {
            console.log("form", this.form);
            addNotice({
              title: this.form.title,
              content: this.form.content
            })
              .then(res => {
                this.form = {};
                this.dialogFormVisible = false;
                this.$message.success(res.msg);
                console.log(res);
                this.getNoticeList();
              })
              .catch(err => {
                this.$message.error(err.msg);
                this.dialogFormVisible = false;
                console.log(err);
              });
          }
          // 修改
          if (this.isadd === false) {
            console.log("form", this.form);
            editNotice({
              id: this.form.id,
              title: this.form.title,
              content: this.form.content
            })
              .then(res => {
                console.log(res);
                this.form = {};
                this.$message.success(res.msg);
                this.dialogFormVisible = false;
                this.getNoticeList();
              })
              .catch(err => {
                this.dialogFormVisible = false;
                this.$message.error(err.msg);
                console.log(err);
              });
          }
        } else {
          this.$message.error("请检查表单!");
        }
      });
    },
    openDialog(row) {
      this.dialogFormVisible = true;
      this.isadd = true;
      this.form = this.$options.data().form;
      if (row !== 1) {
        this.isadd = false;
        // this.resetForm("ruleForm");
        console.log(row);
        // this.form = row;
        this.form.id = row.id;
        this.form.title = row.title;
        this.form.content = row.content;
      }
      console.log(this.$refs);
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.form);
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
.noticemansge {
  // width: 970px;
  box-sizing: border-box;
  // .noticemansge_main::v-deep {
  //   width: 970px;
  // }
}
</style>
